<!-- 我关注 -->
<template>
	<view class="page-view">
		<view class="follow-page" v-if="pagetype==4">
			<u-tabs-swiper ref="tabs" :list="tabs" :current="current" @change="tabChange" inactive-color="#666666"
				:active-color="config.mainColor"></u-tabs-swiper>
			<swiper class="u-flex-1 h-0" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(tab,i) in tabs" :key="i">
					<followScrollItem ref="mescrollItem" :i="i" :index="current" :tabs="tabs" height="100%"></followScrollItem>
				</swiper-item>
			</swiper>
		</view>
		<mescroll-uni ref="mescrollView" @init="mescrollInit" @down="downCallback" @up="upCallback" height="100%" v-else>
			<view class="u-p-30">
				<view class="u-m-b-30  radius20" v-for="(item,index) in list" :key="index">
					<u-swipe-action :show="item.show" :index="index" @click="cancelFollow" @open="open" :options="options"
						btn-width="120" :disabled="pagetype!=1">
						<view class="member-item" @click="navtoPage(item)">
							<view class="u-flex">
								<u-avatar :src="item.avatar" size="116" :show-level="item.is_power"
									:level-bg-color="config.mainColor"></u-avatar>
								<view class="u-flex-1 u-m-l-28">
									<view class="u-flex">
										<text class="u-font-32 font-medium u-m-r-14">{{item.name}}</text>
										<bb-tag v-if="item.is_real"></bb-tag>
									</view>

									<view class="u-tips-color u-m-t-16 u-line-1">
										<text class="">{{item.label}}</text>
										<!-- <text class="divide " v-if="item.edu_name">|</text>
										<text class="">{{item.edu_name}}</text>
										<text class="divide " v-if="item.exp_name">|</text>
										<text class="">{{item.exp_name}}</text> -->
									</view>
								</view>
							</view>
							<view class="u-m-t-20">
								<u-line color="#EFEFEF"></u-line>
							</view>
							<view class="u-p-b-10 u-p-t-10 u-flex u-row-between u-light-color">
								<text>{{pagetype=='1'?'关注了Ta':pagetype=='2'?'Ta关注了你':'查看了你'}}</text>
								<text>{{item.add_time}}</text>
							</view>
						</view>
					</u-swipe-action>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import followScrollItem from './follow-scroll-item.vue'
	// pagetype 1:我关注  2:关注我  3：看过我 4:我看过
	export default {
		components: {
			followScrollItem
		},
		mixins: [MescrollMixin],
		data() {
			return {
				pagetype: 1,
				options: [{
					text: '取消关注',
					style: {
						backgroundColor: '#FFAA44'
					}
				}, ],
				typeMap: {
					'1': '我关注',
					'2': '关注我',
					'3': '看过我',
					'4': '我看过'
				},
				tabs: [{
						name: '把关师',
						type: 1
					},
					{
						name: '需求',
						type: 2
					}
				],
				current: 0,
				swiperCurrent: 0,
				list: [],
				config: this.$appConfig
			}
		},
		onLoad(e) {
			this.pagetype = e.type
			uni.setNavigationBarTitle({
				title: this.typeMap[e.type]
			})
		},
		methods: {
			queryDataList(page) {
				this.$u.api.followList({
					follow: this.pagetype,
					page: page.num,
					limit: page.size
				}).then(res => {
					this.mescroll.endSuccess(res.length);
					if (page.num == 1) this.list = []
					this.list = this.list.concat(res);
					this.list = this.list.map(item => {
						return {
							...item,
							show: false
						}
					})
				})
			},
			upCallback(page) {
				if (this.pagetype == '1' || this.pagetype == '2') {
					this.queryDataList(page)
				} else if (this.pagetype == '3') {
					this.queryDemands(page)
				}

			},
			tabChange(index) {
				console.log(index);
				this.swiperCurrent = index
			},
			cancelFollow(index, index1) {
				const uid = this.list[index].uid
				this.$u.api.followHandle(1, uid).then(res => {
					this.$u.toast('已取消关注')
					this.mescroll.resetUpScroll();
				})
			},
			navtoPage(item) {
				this.$u.route('/pages/subpage/profile/index', {
					id: item.uid
				})
			},
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.list[index]['show'] = true;
				this.list.map((val, idx) => {
					if (index != idx) this.list[idx]['show'] = false;
				})
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			queryDemands(page) {
				this.$u.api.visit2List({
					page: page.num,
					limit: page.size
				}).then(res => {
					this.mescroll.endSuccess(res.length);
					if (page.num == 1) this.list = [];
					this.list = this.list.concat(res)
				}).catch(() => {
					this.mescroll.endErr();
				})

			}
		}
	}
</script>

<style scoped lang="scss">
	.member-item {
		background-color: #ffffff;
		padding: 30rpx 30rpx 0;
	}

	.divide {
		margin: 0 16rpx;
	}


	.follow-page {
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.swiper-item {
		height: 100%;
	}

	.page-box {
		padding: 30rpx;
	}
</style>